<!DOCTYPE html>
<html>
<head>
    <title>绘制时钟</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    //外层
    ctx.fillStyle="#FF0000";
    ctx.beginPath();
    ctx.arc(250,250,250,0,Math.PI*2,true);
    ctx.closePath();
    ctx.fill();
    //内层
    ctx.fillStyle="#00FF00";
    ctx.beginPath();
    ctx.arc(250,250,240,0,Math.PI*2,true);
    ctx.closePath();
    ctx.fill();
    //圆心
    ctx.fillStyle="#000000";
    ctx.beginPath();
    ctx.arc(250,250,10,0,Math.PI*2,true);
    ctx.closePath();
    ctx.fill();
    //绘制小时刻度
    for(var i = 0;i<12;i++){
        ctx.strokeStyle ='rgb(0,0,0)';//线条颜色：绿色
        ctx.lineWidth = 10;//设置线宽
        ctx.beginPath();
        ctx.moveTo(240*Math.sin((Math.PI/6)*i)+250, 250-240*Math.cos((Math.PI/6)*i));//将画笔移到x0,y0处
        ctx.lineTo(220*Math.sin((Math.PI/6)*i)+250, 250-220*Math.cos((Math.PI/6)*i));//从x0,y0到x1,y1画一条线
//ctx.lineTo(i*10+10, i*10+10);//从x1,y1到x2,y2画条线
        ctx.closePath();
        ctx.stroke();//画线
        var text = 12;
        if(i>0){
            text = i;
        }
        ctx.fillStyle ='rgb(255,0,0)';
        ctx.fillText(text, 205*Math.sin((Math.PI/6)*i)+250, 250-205*Math.cos((Math.PI/6)*i));
        ctx.stroke();//画线
    }
    //绘制分钟刻度
    for( i = 0;i<60;i++){
        ctx.strokeStyle ='rgb(0,0,0)';//线条颜色：绿色
        ctx.lineWidth = 5;//设置线宽
        ctx.beginPath();
        ctx.moveTo(240*Math.sin((Math.PI/30)*i)+250, 250-240*Math.cos((Math.PI/30)*i));//将画笔移到x0,y0处
        ctx.lineTo(230*Math.sin((Math.PI/30)*i)+250, 250-230*Math.cos((Math.PI/30)*i));//从x0,y0到x1,y1画一条线
//ctx.lineTo(i*10+10, i*10+10);//从x1,y1到x2,y2画条线
        ctx.closePath();
        ctx.stroke();//画线
    }
    //绘制指针
    function drawClock(){
        var date = new Date();
        var second = date.getSeconds();
        var minute = date.getMinutes();
        var hour = date.getHours();
        var year = date.getYear()+1900;
        var month = date.getMonth()+1;
        var day = date.getDate();
        var week = date.getDay();
        switch(week){
            case 1:
                week = "周一";
                break;
            case 2:
                week = "周二";
                break;
            case 3:
                week = "周三";
                break;
            case 4:
                week = "周四";
                break;
            case 5:
                week = "周五";
                break;
            case 6:
                week = "周六";
                break;
            case 7:
                week = "周日";
                break;
        }
//清除
        ctx.fillStyle="#00FF00";
        ctx.beginPath();
        ctx.arc(250,250,190,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fill();
        ctx.fillStyle="#000000";
        ctx.beginPath();
        ctx.arc(250,250,10,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fill();
//秒
        ctx.strokeStyle ='rgb(0,0,0)';//线条颜色：绿色
        ctx.lineWidth = 5;//设置线宽
        ctx.beginPath();
        ctx.moveTo(190*Math.sin((Math.PI/30)*second)+250, 250-190*Math.cos((Math.PI/30)*second));//将画笔移到x0,y0处
        ctx.lineTo(10*Math.sin((Math.PI/30)*second)+250, 250-10*Math.cos((Math.PI/30)*second));//从x0,y0到x1,y1画一条线
//ctx.lineTo(i*10+10, i*10+10);//从x1,y1到x2,y2画条线
        ctx.closePath();
        ctx.stroke();//画线
//分钟
        ctx.strokeStyle ='rgb(0,100,80)';//线条颜色：绿色
        ctx.lineWidth = 5;//设置线宽
        ctx.beginPath();
        ctx.moveTo(150*Math.sin((Math.PI/(5*360))*second+Math.PI/(6*5)*minute)+250, 250-150*Math.cos((Math.PI/(5*360))*second+Math.PI/(6*5)*minute));//将画笔移到x0,y0处
        ctx.lineTo(10*Math.sin((Math.PI/(5*360))*second+Math.PI/(6*5)*minute)+250, 250-10*Math.cos((Math.PI/(5*360))*second+Math.PI/(6*5)*minute));//从x0,y0到x1,y1画一条线
//ctx.lineTo(i*10+10, i*10+10);//从x1,y1到x2,y2画条线
        ctx.closePath();
        ctx.stroke();//画线
//小时
        ctx.strokeStyle ='rgb(0,10,80)';//线条颜色：绿色
        ctx.lineWidth = 5;//设置线宽
        ctx.beginPath();
        ctx.moveTo(100*Math.sin((Math.PI/(6*60*60))*second+Math.PI/(6*60)*minute+Math.PI/6*hour)+250, 250-100*Math.cos((Math.PI/(6*60*60))*second+Math.PI/(6*60)*minute+Math.PI/6*hour));//将画笔移到x0,y0处
        ctx.lineTo(10*Math.sin((Math.PI/(6*60*60))*second+Math.PI/(6*60)*minute+Math.PI/6*hour)+250, 250-10*Math.cos((Math.PI/(6*60*60))*second+Math.PI/(6*60)*minute+Math.PI/6*hour));//从x0,y0到x1,y1画一条线
//ctx.lineTo(i*10+10, i*10+10);//从x1,y1到x2,y2画条线
        ctx.closePath();
        ctx.stroke();//画线
//文字时钟
        ctx.fillStyle ='rgb(255,0,0)';
        ctx.fillText(year+"年"+month+"月"+day+"日 "+week+"\n"+hour+":"+minute+":"+second,200,200);
        ctx.stroke();//画线
    }
    setInterval("drawClock()",1000);
</script>
<html>